{extend name="common/dialog" /}
{block name="main"}
 <div class="layui-form-box dialog-form-box " style="margin-top:25px;">
<form class="layui-form ">
		<input type="hidden" name="pid" value="{$pid}">
		<input type="hidden" name="id" value="{$row['id']}">
        <div class="layui-form-item">
            <label class="layui-form-label" >{:lang('Cloud Provider')}</label>
            <div class="layui-input-6">
               <select id="_cloud_id" name="cloud_id" >
                        <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($clouds as $cloud):?>
                        <option value="{$cloud['id']}" <?php if($row['cloud_id'] == $cloud['id']){echo "selected";}?> >{$cloud['name']}</option>
                        <?php endforeach;?>
                      </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >{:lang('Region')}</label>
            <div class="layui-input-inline" style="width: 158x;">
              <select name="country_id" id="country_id" lay-filter="countryId"  data-aid="{:intval($row['city_id'])}" data-value="{$row['country_id']|intval}" >
                <option value="">{:lang('Please Choose')}</option>
                <?php foreach($areas as $area):?>
                <option value="{$area['id']}" <?php if($row['country_id'] == $area['id']){echo "selected"; }?>>{$area['name']}</option>
                <?php endforeach;?>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 158px;">
               <select name="city_id"  id="city_id" data-value="{$row['city_id']|intval}">
                <option value="">{:lang('Please Choose')}</option>
                
              </select>
            </div>

          </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label"  >{:lang('Data Center')}</label>
            <div class="layui-input-6 ">
               <input type="text" name="name" value="{$row['name']}" placeholder="" class="layui-input">
            </div> 
        </div>
        <br/>
        <br/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-label-no"  >&nbsp;</label>
            <div class="layui-input-6 pleft22">
               <button type="button" class="layui-btn" lay-submit="" lay-filter="submit" >{:lang('Submit')}</button>
            </div>
            
        </div>
    </form>
</div>
{/block}
{block name="footer"}
<script>
layui.use(['form', 'layer'], function () {
    var form = layui.form, layer = layui.layer,$= layui.jquery;
    form.on('submit(submit)', function (data) {
        loading = layer.load(1,{shade:[0.1,'#fff']});
        $.post("", data.field, function (res) {
            layer.close(loading);
            if (res.code > 0) {
                layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                    top.location.reload();
                });
            } else {
                layer.msg(res.msg, {time: 1800, icon: 2});
            }
        });
    })
    /*本端pop点切换*/
    form.on("select(countryId)",function(obj){
        var doem = "#city_id";
        var value = obj.elem.dataset.aid;
        loading = layer.load(1,{shade:[0.1,'#fff']});
        $.post("{:U('area/lists')}",{pid:obj.value},function(res){
            layer.close(loading);
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            if(res.code == 1){
                $.each(res.items,function(i,item){
                    if(value == item.id){
                        $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                    }else{
                        $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                    }
                })
            }
            form.render();
        },'json')
    })
    if($("#country_id").data('value') != 0){
        var _doem = $("#city_id");
        var _var = $("#city_id").data('value');
        $.post("{:U('area/lists')}",{pid:$("#country_id").data('value')},function(res){
            if(res.code == 1){
                $.each(res.items,function(i,item){
                    if(_var == item.id){
                        _doem.append("<option value='"+item.id+"' selected >"+item.name+"</option")
                    }else{
                        _doem.append("<option value='"+item.id+"'>"+item.name+"</option")
                    }
                    
                })
            }
            form.render();
        },'json')
    }
});
</script>
{/block}